<template>
    <view class="cu-modal bottom-modal tl-text-edit" :class="{show:isShow}">
        <view class="cu-dialog">
            <view class="flex flex-direction h100">
                <view :style="CustomBarStyle">
                    <cu-custom :isBack="true" @cuBack="handleBack" :backType="0"/>
                </view>
                <view class="flex-sub azm-textarea">
                        <textarea :placeholder="placeholder" v-model="text" v-if="isShow"
                                  placeholder-class="input-placeholder"
                                  :focus="isFocus" :holdKeyboard="true"
                                  :maxlength="maxLength" :cursorSpacing="50"
                                  @focus="handleFocus" @blur="handleBlur"
                                  @confirm="handleConfirm"/>
                </view>
                <view class="flex align-center justify-end azm-textarea-text" v-if="isFocus">
                    <text>{{text.length}}/{{maxLength}}</text>
                </view>
                <view :style="keyboardHeight"/>
                <view class="flex align-center justify-end azm-bottom">
                    <button class="cu-btn round line-blue azm-clear" @tap="handleClear" v-if="text">清空</button>
                    <button class="cu-btn round line-blue" @tap="handleConfirm">保存</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import cuCustom from '../navBar/cu-custom.vue'

    let OPTS = {};
    const MAXLENGTH = 60;
    const PLACEHOLDER = '请输入';
    let historyValue = null;
    export default {
        components: {
            cuCustom
        },
        name: 'tl-text-edit',
        data () {
            const systemInfo = this.SystemInfo || {};
            const object2style = this.$util.object2style;
            return {
                isShow: false,
                isFocus: false,
                Custom: {},
                StatusBar: systemInfo.StatusBar,
                CustomBar: systemInfo.CustomBar,
                CustomBarStyle: object2style({height: systemInfo.CustomBar + 'px'}),
                keyboardHeight: "height:0",
                maxLength: MAXLENGTH,
                placeholder: PLACEHOLDER,
                text: ''
            };
        },
        computed: {},
        props: {},
        methods: {
            init (bol = true) {
                if (bol) uni.onKeyboardHeightChange(this.handleKeyboardHeightChange);
                OPTS = {};
                this.text = '';
                historyValue = null;
                this.maxLength = MAXLENGTH;
                this.placeholder = PLACEHOLDER;
                if (bol) this.handleFocus();
                else this.handleBlur();
            },
            async handleBack () {
                let text = this.text;
                let {isNumberOfNaN, isEmpty} = this.$util.jude;
                if (historyValue === null || (isEmpty(text) || historyValue === text)) {
                    return this.hide();
                }
                const result = await this.$util.showModalSync({
                    title: '提示',
                    content: '是否保存？'
                });
                if (result && result.confirm === true) {
                    this.handleConfirm();
                } else {
                    this.hide();
                }
            },
            show ({value = '', success, fail, maxLength = 60, placeholder}) {
                let {isNumberOfNaN, isEmpty} = this.$util.jude;
                let {getNumber} = this.$util;
                this.init();
                OPTS = {success, fail};
                if (value && (typeof value === "string" || typeof value === "number"))
                    this.text = historyValue = value;
                if (isNumberOfNaN(maxLength))
                    this.maxLength = getNumber(maxLength, MAXLENGTH);
                if (!isEmpty(placeholder))
                    this.placeholder = placeholder;
                this.isShow = true;
            },
            hide () {
                this.init(false);
                this.isShow = false;
            },
            handleFocus (e) {
                this.isFocus = true
            },
            handleBlur (e) {
                this.isFocus = false
            },
            handleKeyboardHeightChange (data) {
                const {isNumberOfNaN} = this.$util.jude;
                const {object2style} = this.$util;
                if (data && isNumberOfNaN(data.height)) {
                    this.keyboardHeight = object2style({height: `${data.height}px`});
                }
            },
            async handleConfirm () {
                let {isNumberOfNaN, isEmpty} = this.$util.jude;
                const text = this.text;
                let flag = false;
                if (historyValue !== null) {
                    const txt = isEmpty(text) ? '内容未编辑，' : (historyValue === text ? '内容未发生变化，' : '');
                    if (txt) {
                        const result = await this.$util.showModalSync({
                            title: '提示',
                            content: txt + '是否退出？',
                            confirmText: '退出'
                        });
                        if (result && result.confirm === true) {
                            OPTS && typeof OPTS.fail === "function" && OPTS.fail(text);
                            return this.hide();
                        }
                    } else {
                        flag = true;
                    }
                } else if (!isEmpty(text)) {
                    flag = true;
                }
                if (flag) {
                    OPTS && typeof OPTS.success === "function" && OPTS.success(text);
                    this.hide();
                }
            },
            async handleClear () {
                let result = await this.$util.showModalSync({
                    title: '提示',
                    content: '是否清空？',
                    confirmText: '清空'
                });
                if (result && result.confirm === true) this.text = '';
                this.handleFocus();
            }
        }
    }
</script>

<style scoped lang="scss">
    .h100 {
        height: 100%;
    }

    .tl-text-edit {
        .cu-dialog {
            height: 100%;
            background: #fff;
        }

        textarea {
            width: 100%;
            height: 100%;
            text-align: left;
            font-size: 14*2upx;
        }

        .azm-textarea, .azm-bottom {
            padding: 10*2upx 18*2upx;
        }

        .azm-bottom {
            height: 47px;
            background: rgba(247, 247, 247, 1);
            box-shadow: 0 1*2upx 0 0 rgba(228, 228, 228, 1);

            button {
                font-size: 18*2upx;
                min-width: 36*2upx;
                color: #0075FF;
                font-weight: 500;
                padding: 0;
                text-align: right;

                &:after {
                    border: none;
                }

                &.azm-clear {
                    color: $tl-text-color-placeholder;
                    margin-right: 20*2upx;
                }
            }
        }

        .azm-textarea-text {
            font-size: 12*2upx;
            padding: 10*2upx 18*2upx;
        }
    }

</style>
